<template>
  <el-dialog
    top="30px"
    width="900px"
    title="异常受理"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <div class="card">
        <div class="card-body">
          <div class="report-title">基本信息</div>
          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标人名称：</div>
                <div class="dl-dd">{{ infoData.enterprise_name }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">营业执照：</div>
                <div class="dl-dd">{{ infoData.enterprise_code }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标担保金额：</div>
                <div class="dl-dd">{{ infoData.tender_bond }} 元</div>
              </div>
            </div>
          </div>

          <div class="row">
            <!-- <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">标段编号：</div>
                <div class="dl-dd">
                  {{
                    infoData.section_code
                      ? `${infoData.section_name}-${infoData.section_code}`
                      : infoData.section_name
                  }}
                </div>
              </div>
            </div> -->
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">申请人：</div>
                <div class="dl-dd">{{ infoData.agent_name }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">联系电话：</div>
                <div class="dl-dd">{{ infoData.agent_phone }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">申请时间：</div>
                <div class="dl-dd">{{ infoData.create_time }}</div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">开标时间：</div>
                <div class="dl-dd">{{ openTime }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">担保费：</div>
                <div class="dl-dd">{{ infoData.gua_fee }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">缴费状态：</div>
                <div class="dl-dd">{{ enumPayStatus[infoData.pay_status] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-body">
          <div class="report-title">异常信息</div>
          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">提交时间：</div>
                <div class="dl-dd">{{ infoData.ex_time }}</div>
              </div>
            </div>

            <div class="col-sm-8">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">异常类型：</div>
                <div class="dl-dd">{{ enumExType[infoData.type] }}</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">情况说明：</div>
                <div class="dl-dd">{{ infoData.ex_des }}</div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-12">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">附件：</div>
                <div class="dl-dd">
                  <a
                    v-if="infoData.notice_url"
                    :href="infoData.notice_url + `?${+new Date()}`"
                    target="_blank"
                    :download="infoData.notice_url"
                  >
                    {{ infoData.notice_url }}
                  </a>
                  <span v-else>无</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-body">
          <div class="report-title">
            核实信息（{{ enumExStatus[infoData.ex_handle_status || 0] }}）
          </div>
          <div class="row">
            <table
              class="table table-sm table-bordered approve-table"
              v-if="+(infoData.ex_handle_status || '') === 1 || !viewMode"
            >
              <colgroup>
                <col width="20%" />
                <col width="30%" />
                <col width="20%" />
                <col width="30%" />
              </colgroup>
              <tbody>
                <tr>
                  <td>项目经理</td>
                  <td colspan="3" class="report-input-td">
                    <div v-if="!viewMode" class="bg-edit">
                      <textarea
                        rows="3"
                        class="form-control"
                        v-model="infoData.ex_handle_option"
                        placeholder="核实内容"
                      ></textarea>
                      <div class="p-2 d-flex justify-content-between">
                        <div>
                          签字：{{ viewMode ? infoData.ex_handle_person || '' : user.realName }}
                        </div>
                        <div class="w-50">日期：{{ dateStr }}</div>
                      </div>
                    </div>
                    <div v-else>
                      <record-item
                        :record-data="{
                          approval_person: infoData.ex_handle_person,
                          approval_option: infoData.ex_handle_option,
                          dateStr: dateStr,
                        }"
                      ></record-item>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="text-center mt-3" v-if="!viewMode">
        <el-button class="btn-long" type="primary" :loading="saveLoading" @click="handlePass">
          核实
        </el-button>
        <el-button class="btn-long" :disabled="saveLoading" @click="beforeClose">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { enumExType, enumPayStatus, enumExStatus } from '@/bigcredit/views/letter/abnormal/Index'
import { mapGetters } from 'vuex'
import RecordItem from '@/credit/views/county/unionProvince/components/projectApprove/RecordItem'

export default {
  components: {
    RecordItem,
  },
  props: {
    visible: Boolean,
    queryId: String,
    viewMode: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      enumExStatus,
      enumExType,
      enumPayStatus,
      saveLoading: false,
      loading: false,
      infoData: {},
      tableName: 'guarantee_ex_view',
    }
  },
  computed: {
    ...mapGetters(['user']),
    dateStr() {
      return this.$utils.dateFormat(this.infoData.ex_handle_time || new Date(), 'yyyy-MM-dd')
    },
    openTime() {
      const date = this.infoData.open_time || ''
      return `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(
        6,
        8
      )} ${date.substring(8, 10)}:${date.substring(10, 12)}`
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handlePass() {
      if (!this.infoData.id) {
        return
      }
      this.$utils
        .msgbox({
          message: `确认核实?`,
          type: 'info',
          beforeClose: () =>
            this.$api.updateData(this.$serviceName, 'guarantee_ex', this.infoData.id, {
              ex_handle_status: 1,
              ex_handle_time: this.$utils.dateFormat(new Date()),
              ex_handle_person: this.user.realName,
              ex_handle_option: this.infoData.ex_handle_option,
            }),
        })
        .then(() => {
          this.$message.success('操作成功！')
          this.$emit('success', false)
          this.beforeClose()
        })
        .catch(() => this.$message.error(`操作失败，请重试！`))
    },
    getData() {
      if (!this.queryId) {
        this.infoData = {}
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          this.infoData = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.report-title {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}
</style>
